<template>
  <!--- 更换 -->
  <view class="spotContent">
    <view class="grid-body mt-30">
      <view class="check grid-common">
        <view class="title flex">
          <image class="icon-style" src="/static/images/point-check.png" mode="aspectFill"></image>
          <text class="flex-1">{{ detail.taskName }}</text>
        </view>
        <view class="flex text"
          >点检部门：
          <text> {{ detail.deptName }}</text>
        </view>
        <view class="flex text"
          >点检岗位：
          <text> {{ detail.postName }}</text>
        </view>
        <view class="flex text"
          >点检人员：
          <text>{{ detail.userName }}</text>
        </view>
        <view class="flex text"
          >开始时间：
          <text>{{ detail.taskStartTime }}</text>
        </view>
        <view class="flex text"
          >截止时间：
          <text>{{ detail.taskEndTime }}</text>
        </view>
        <view class="flex text"
          >完成方式：
          <text>{{ detail.taskCompleteModeLabel }}</text>
        </view>
      </view>
    </view>
    <view class="item-content">
      <view class="hidden-title">点检事项状态</view>
      <view class="background-white">
        <view v-for="(itemInfo, index) in detail.itemList" :key="index">
          <view class="step-block">
            <view class="step">
              <view class="step-no"
                ><image class="icon-style" :src="getImage(itemInfo)" mode="aspectFill"></image
              ></view>
              <view
                class="stepLine"
                v-show="!(index === detail.itemList.length - 1 && detail.itemList[index].pathList.length === 0)"
              ></view>
            </view>
            <view class="step-content">
              <view class="check grid-common">
                <view class="flex text"
                  >点检场所：
                  <text> {{ itemInfo.areaName }}</text>
                </view>
                <view class="flex text"
                  >场所点检状态：
                  <text>{{ itemInfo.taskStatusLabel }}</text>
                </view>
                <view class="footer-wrap">
                  <view class="content-wrap"> </view>
                  <view class="button-wrap">
                    <button
                      class="button"
                      v-if="itemInfo.taskStatus == '2' || readOnly"
                      @click="goOperationAreaSpotCheck(itemInfo.subTaskItemId, true)"
                    >
                      查看
                    </button>
                    <button
                      class="button-orange button"
                      v-else
                      @click="goOperationAreaSpotCheck(itemInfo.subTaskItemId, '', index, itemInfo.taskStatus, 'area')"
                    >
                      点检
                    </button>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-for="(pathInfo, index2) in itemInfo.pathList" :key="index2">
            <view class="step-block">
              <view class="step">
                <view class="step-no"
                  ><image class="icon-style" :src="getImage(pathInfo, detail.taskEndTime)" mode="aspectFill"></image
                ></view>
                <view
                  class="stepLine"
                  v-show="!(index2 === itemInfo.pathList.length - 1 && index === detail.itemList.length - 1)"
                ></view>
              </view>
              <view class="step-content">
                <view class="check grid-common">
                  <view class="flex text">
                    点检设备：
                    <text> {{ pathInfo.deviceName }}</text>
                  </view>
                  <view class="flex text"
                    >点检内容（待点检数/总数）：
                    <text>{{ pathInfo.waitNum + '/' + pathInfo.totalNum }}</text>
                  </view>
                  <view class="footer-wrap">
                    <view class="content-wrap"> </view>
                    <view class="button-wrap">
                      <button
                        v-if="pathInfo.waitNum === 0 || readOnly"
                        class="button"
                        @click="
                          goOperationSpotCheck(
                            pathInfo.subTaskPathId,
                            pathInfo.deviceId,
                            pathInfo.deviceName,
                            pathInfo.devicePositionNum,
                            itemInfo.areaName,
                            true
                          )
                        "
                      >
                        查看
                      </button>
                      <button
                        v-else
                        class="button button-orange"
                        @click="
                          goOperationSpotCheck(
                            pathInfo.subTaskPathId,
                            pathInfo.deviceId,
                            pathInfo.deviceName,
                            pathInfo.devicePositionNum,
                            itemInfo.areaName,
                            undefined,
                            itemInfo.areaId,
                            index,
                            index2,
                            pathInfo.taskStatus,
                            'device'
                          )
                        "
                      >
                        点检
                      </button>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-overlay :show="showTips" @click="showTips = false">
      <view class="overlay-content">
        <view class="icon-box">
          <image class="icon-style" src="/static/images/work/nfc.png" mode="aspectFill" />
        </view>
        <view class="overlay-title">匹配失败</view>
        <view class="overlay-text">1.请确认扫描的标签为设备标签</view>
        <view class="overlay-text">2.可能标签对应设备非当前设备</view>
        <view class="overlay-text">3.可能标签信息损坏，请联系管理员</view>
      </view>
    </u-overlay>
  </view>
</template>

<script>
import { getSubTaskDetail } from '@/api/equipment/spotCheck'
import { cloneDeep } from 'lodash'
// import View from "../../report-form/query/view.vue";
import { closeNFC, initNFC, readNFC, isEnable } from '@/utils/nfc'
import { seqAndNfcConf } from '@/api/equipment/device-manage'

export default {
  // components: {View},
  data() {
    return {
      subTaskId: '',
      readOnly: false,
      detail: {},
      isNeedBySeq: false,
      bySeqFlag: false,
      showTips: false
    }
  },
  onLoad({ subTaskId, readOnly }) {
    this.subTaskId = subTaskId
    this.readOnly = readOnly && readOnly !== 'undefined' ? readOnly : false
    this.getDetail()
  },
  onUnload() {
    closeNFC()
  },
  onShow() {
    if (this.subTaskId) {
      this.getDetail()
    }
  },
  onPullDownRefresh() {
    this.getDetail()
  },
  methods: {
    getImage(item) {
      switch (item.taskStatus) {
        case '2':
          return '/static/images/notOverdueComplete.png'
        case '4':
          return '/static/images/overdueComplete.png'
        case '3':
          return '/static/images/overdueNotComplete.png'
        case '1':
          return '/static/images/notOverdueNotComplete.png'
        default:
          return '/static/images/notOverdueNotComplete.png'
      }
    },
    async goOperationAreaSpotCheck(subTaskItemId, readOnly, index, taskStatus, type) {
      // console.log('场所 index', index)
      // console.log('场所 taskStatus', taskStatus)
      const _this = this

      // this.querySeqStatus()
      // console.log('设备 isNeedBySeq', this.isNeedBySeq)

      let { data } = await seqAndNfcConf()
      console.log('seqAndNfcConf', data)
      this.isNeedBySeq = data.sortFlag

      if (!readOnly) {
        if (this.isNeedBySeq) {
          this.isMatchSeq(type, index, '')
          console.log('场所 bySeqFlag', this.bySeqFlag)
        } else {
          this.bySeqFlag = false
        }
      } else {
        // 查看时不判断
        this.bySeqFlag = false
      }
      if (this.bySeqFlag) {
        this.$modal.msgError('请按顺序点检')
        return
      }

      uni.navigateTo({
        url:
          '/pages/work/intelligentPatrolInspection/spotCheck/areaSpotCheck?subTaskItemId=' +
          subTaskItemId +
          '&readOnly=' +
          readOnly,
        events: {
          reloadEvent: function (isReload) {
            // if (isReload) {
            //   _this.getDetail();
            // }
          }
        }
      })
    },
    async goOperationSpotCheck(
      subTaskPathId,
      deviceId,
      deviceName,
      devicePositionNum,
      areaName,
      readOnly,
      areaId,
      index,
      index2,
      taskStatus,
      type
    ) {
      console.log('devicePositionNum', devicePositionNum)
      // console.log('设备 index2', index2)
      // console.log('设备 taskStatus', taskStatus)

      // this.querySeqStatus()
      // console.log('设备 isNeedBySeq', this.isNeedBySeq)

      let { data } = await seqAndNfcConf()
      this.isNeedBySeq = data.sortFlag

      console.log('readOnly', readOnly)
      if (!readOnly) {
        if (this.isNeedBySeq) {
          this.isMatchSeq(type, index, index2)
          console.log('设备 bySeqFlag', this.bySeqFlag)
        } else {
          this.bySeqFlag = false
        }
      } else {
        // 查看时不判断
        this.bySeqFlag = false
      }
      if (this.bySeqFlag) {
        this.$modal.msgError('请按顺序点检')
        return
      }

      if (data.nfcFlag && !readOnly) {
        if (!initNFC()) return
        if (this.timeout) {
          clearTimeout(this.timeout)
          this.timeout = null
        }

        this.timeout = setTimeout(function () {
          closeNFC()
        }, 5000)

        readNFC((data) => {
          console.log('read devicePositionNum', data)
          if (this.timeout) {
            clearTimeout(this.timeout)
            this.timeout = null
          }
          if (data === devicePositionNum) {
            uni.navigateTo({
              url:
                '/pages/work/intelligentPatrolInspection/spotCheck/deviceDetail?subTaskPathId=' +
                subTaskPathId +
                '&deviceId=' +
                deviceId +
                '&deviceName=' +
                deviceName +
                '&areaName=' +
                areaName +
                '&readOnly=' +
                readOnly +
                '&areaId=' +
                areaId
            })
          } else {
            this.showTips = true
          }
        })
      } else {
        uni.navigateTo({
          url:
            '/pages/work/intelligentPatrolInspection/spotCheck/deviceDetail?subTaskPathId=' +
            subTaskPathId +
            '&deviceId=' +
            deviceId +
            '&deviceName=' +
            deviceName +
            '&areaName=' +
            areaName +
            '&readOnly=' +
            readOnly +
            '&areaId=' +
            areaId
        })
      }
    },
    getDetail() {
      getSubTaskDetail(this.subTaskId).then(({ data }) => {
        if (data) {
          this.detail = data
          console.log('detail', this.detail)
        } else {
          uni.navigateBack()
        }
      })
    },
    navigateBack() {
      uni.navigateBack()
    },

    // 按顺序点检开关是否开启
    async querySeqStatus() {
      let { data } = await seqAndNfcConf()
      this.isNeedBySeq = data.sortFlag
    },

    // 是否有按顺序点检
    // true-有未执行 false-没有未执行
    isMatchSeq(type, areaIdx, deviceIdx) {
      console.log('type', type)
      console.log('areaIdx', areaIdx)
      console.log('deviceIdx', deviceIdx)
      // 重置
      this.bySeqFlag = false

      if (areaIdx === -1 || deviceIdx === -1) {
        return
      } else {
        if (type === 'area') {
          let { itemList } = this.detail
          if (areaIdx === 0) {
            this.bySeqFlag = false
            return
          }
          for (let i = 0; i < areaIdx; i++) {
            for (let j = 0; j < itemList[i].pathList.length; j++) {
              if (itemList[i].pathList[j].taskStatus === '1') {
                this.bySeqFlag = true
                console.log('之前的点检场所下还有设备未巡检')
                break
              } else {
                this.bySeqFlag = false
              }
            }
            if (this.bySeqFlag) {
              console.log('之前的点检场所下还有设备未巡检')
              break
            }
          }
        } else if (type === 'device') {
          let { itemList } = this.detail
          if (itemList[areaIdx].taskStatus === '1') {
            this.bySeqFlag = true
            console.log('当前的点检场所还未巡检')
            return
          }

          for (let i = 0; i < areaIdx; i++) {
            for (let j = 0; j < itemList[i].pathList.length; j++) {
              if (itemList[i].pathList[j].taskStatus === '1') {
                this.bySeqFlag = true
                console.log('之前的点检场所下还有设备未巡检')
                break
              } else {
                this.bySeqFlag = false
              }
            }
            if (this.bySeqFlag) {
              console.log('之前的点检场所下还有设备未巡检')
              break
            }
          }

          if (this.bySeqFlag) return

          let deviceList = itemList[areaIdx].pathList
          const fix = deviceList.findIndex((item) => item.taskStatus === '1')
          if (fix < deviceIdx) {
            this.bySeqFlag = true
            console.log('当前的点检设备的前面还有设备未巡检')
            return
          }
          this.bySeqFlag = false
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.spotContent {
  .item-content {
    .hidden-title {
      background: #f5f5f5;
      padding: 20rpx;
      padding-top: 0rpx;
      color: #999;
    }
    .step-block {
      width: 100%;
      //height: 70px;
      display: flex;
    }
    .step {
      width: 10%;
      margin-left: 16px;
      display: flex;
      flex-direction: column;
      .stepLine {
        width: 2px;
        margin-left: 11px;
        margin-bottom: 2px;
        background-color: rgb(208, 208, 208);
        flex: 1;
      }
      .icon-style {
        width: 46rpx;
        height: 46rpx;
      }
    }
    .step-content {
      flex: 1;
      .grid-common {
        padding: 16px;
        margin-bottom: 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-right: 16px;
      }
      .check {
        .title {
          font-size: 34rpx;
          font-weight: 700;
        }

        .icon-style {
          width: 52rpx;
          height: 52rpx;
          margin-right: 20rpx;
        }

        .text {
          color: #999;

          text {
            color: #333;
            display: inline-block;

            &.text-grey {
              color: #999;
            }

            &.w-50 {
              width: 50%;
            }
          }
        }

        .flex-text {
          padding-top: 24rpx;
          display: flex;
          color: #999;

          text {
            color: #333;
            display: inline-block;
          }
        }

        .bor-top {
          padding-top: 20rpx;
          border-top: 1px solid #d5d7e3;
        }
      }
    }
    .title {
      border: none;
      text-align: center;
      height: 30px;
    }
  }

  .grid-body {
    background-color: transparent;
    .grid-common {
      margin-bottom: 30rpx;
      background-color: #fff;
      border-radius: 20rpx;
    }
    .check {
      .title {
        font-size: 34rpx;
        font-weight: 700;
      }

      .icon-style {
        width: 52rpx;
        height: 52rpx;
        margin-right: 20rpx;
      }

      .text {
        color: #999;

        text {
          width: 76%;
          color: #333;
          display: inline-block;

          &.text-grey {
            color: #999;
          }

          &.w-50 {
            width: 50%;
          }
        }
      }

      .flex-text {
        padding-top: 24rpx;
        display: flex;
        color: #999;

        text {
          color: #333;
          display: inline-block;
        }
      }

      .bor-top {
        padding-top: 20rpx;
        border-top: 1px solid #d5d7e3;
      }
    }
  }
  .overlay-content {
    width: 66%;
    margin: 30% auto auto auto;
    color: #fff;
    .icon-box {
      display: flex;
      justify-content: center;
      margin: 10px 0;
      .icon-style {
        width: 54px;
        height: 54px;
      }
    }
    .overlay-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 20px;
      text-align: center;
    }
    .overlay-text {
      text-align: center;
    }
  }
}
</style>
